import { history, IRouteComponentProps } from 'umi';
import { useEffect, useState } from 'react';
import PageInnerHeader from '@/components/page-inner-header/PageInnerHeader';

const MonitorIndex: React.FC<IRouteComponentProps> = (props) => {
  const [headerActive, setHeaderActive] = useState('');

  useEffect(() => {
    if (props.location.pathname === '/monitor') {
      history.push('/monitor/main');
    }
    if (props.location.pathname.indexOf('main') > -1) {
      setHeaderActive('main');
    }
    if (props.location.pathname.indexOf('analysis') > -1) {
      setHeaderActive('analysis');
    }
  }, [props.location.pathname]);

  const handleChange = (value: string) => {
    history.push(`/monitor/${value}`);
  };

  return (
    <div>
      <PageInnerHeader
        options={[
          { text: '全部矿场', value: 'main' },
          { text: '数据统计', value: 'analysis' },
        ]}
        title="矿场管理"
        onChange={handleChange}
        headerActive={headerActive}
      />
      {props.children}
    </div>
  );
};
export default MonitorIndex;
